<template>
  <div class="book-detail">
    <nav-bar />
    
    <div class="container">
      <el-row :gutter="40">
        <el-col :span="8">
          <div class="book-cover">
            <img :src="book.cover" :alt="book.title" />
          </div>
        </el-col>
        
        <el-col :span="16">
          <div class="book-info">
            <h1 class="book-title">{{ book.title }}</h1>
            <p class="book-author">作者：{{ book.author }}</p>
            
            <div class="book-rating">
              <el-rate
                v-model="book.rating"
                disabled
                show-score
                text-color="#ff6b6b"
                score-template="{value}分"
              />
              <span class="rating-count">({{ book.review_count }}条评价)</span>
            </div>
            
            <div class="book-price">
              <span class="price-label">价格：</span>
              <span class="price">¥{{ book.price.toFixed(2) }}</span>
            </div>
            
            <div class="book-stock">
              <span class="stock-label">库存：</span>
              <span :class="book.stock > 0 ? 'in-stock' : 'out-of-stock'">
                {{ book.stock > 0 ? `有货 (${book.stock}件)` : '暂时缺货' }}
              </span>
            </div>
            
            <div class="book-actions">
              <el-input-number
                v-model="quantity"
                :min="1"
                :max="book.stock"
                :disabled="book.stock === 0"
              />
              
              <el-button
                type="primary"
                size="large"
                :disabled="book.stock === 0"
                @click="addToCart"
              >
                加入购物车
              </el-button>
              
              <el-button
                size="large"
                @click="addToWishlist"
              >
                收藏
              </el-button>
            </div>
            
            <div class="book-tags">
              <el-tag
                v-for="tag in book.tags"
                :key="tag"
                type="info"
                class="tag"
              >
                {{ tag }}
              </el-tag>
            </div>
          </div>
        </el-col>
      </el-row>
      
      <el-divider />
      
      <div class="book-description">
        <h3>图书简介</h3>
        <p>{{ book.description }}</p>
      </div>
      
      <el-divider />
      
      <div class="book-reviews">
        <h3>用户评价</h3>
        <div class="review-list">
          <div
            v-for="review in reviews"
            :key="review.id"
            class="review-item"
          >
            <div class="review-header">
              <span class="reviewer">{{ review.user }}</span>
              <el-rate
                v-model="review.rating"
                disabled
                size="small"
              />
              <span class="review-date">{{ review.date }}</span>
            </div>
            <p class="review-content">{{ review.content }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import NavBar from '@/components/NavBar.vue'
import { ElMessage } from 'element-plus'

const route = useRoute()
const quantity = ref(1)

const book = ref({
  id: 1,
  title: '深入理解计算机系统',
  author: 'Randal E. Bryant',
  price: 139.00,
  cover: 'https://via.placeholder.com/400x600/667eea/ffffff?text=CSAPP',
  rating: 4.8,
  review_count: 234,
  stock: 15,
  tags: ['计算机', '编程', '经典'],
  description: '《深入理解计算机系统》是一本计算机科学经典教材，全面介绍了计算机系统的各个方面，包括程序结构、内存层次结构、链接、异常控制流、虚拟内存、系统级I/O、网络编程和并发编程等。本书以程序员的角度详细阐述计算机系统的本质概念，并展示这些概念如何实实在在地影响应用程序的正确性、性能和实用性。'
})

const reviews = ref([
  {
    id: 1,
    user: '张三',
    rating: 5,
    content: '非常好的书，内容深入浅出，适合所有程序员阅读。',
    date: '2024-01-15'
  },
  {
    id: 2,
    user: '李四',
    rating: 4,
    content: '经典教材，但是有些地方比较难懂，需要多读几遍。',
    date: '2024-01-10'
  },
  {
    id: 3,
    user: '王五',
    rating: 5,
    content: '计算机专业必读，强烈推荐！',
    date: '2024-01-05'
  }
])

const addToCart = () => {
  ElMessage.success(`已将 ${quantity.value} 本《${book.value.title}》加入购物车`)
}

const addToWishlist = () => {
  ElMessage.success('已添加到收藏夹')
}

onMounted(() => {
  const bookId = route.params.id
  // 根据bookId加载图书详情
  console.log('加载图书详情:', bookId)
})
</script>

<style scoped>
.book-detail {
  min-height: 100vh;
  background: #f5f5f5;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.book-cover {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.book-cover img {
  width: 100%;
  height: auto;
  display: block;
}

.book-info {
  padding-left: 20px;
}

.book-title {
  font-size: 28px;
  margin-bottom: 10px;
  color: #333;
}

.book-author {
  font-size: 18px;
  color: #666;
  margin-bottom: 20px;
}

.book-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.rating-count {
  color: #999;
  font-size: 14px;
}

.book-price {
  margin-bottom: 20px;
}

.price-label {
  font-size: 16px;
  color: #666;
}

.price {
  font-size: 24px;
  font-weight: bold;
  color: #ff6b6b;
}

.book-stock {
  margin-bottom: 30px;
}

.stock-label {
  font-size: 16px;
  color: #666;
}

.in-stock {
  color: #52c41a;
  font-weight: bold;
}

.out-of-stock {
  color: #ff4d4f;
  font-weight: bold;
}

.book-actions {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 30px;
}

.book-tags {
  display: flex;
  gap: 10px;
}

.book-description {
  margin: 30px 0;
}

.book-description h3 {
  margin-bottom: 15px;
  color: #333;
}

.book-description p {
  line-height: 1.8;
  color: #666;
}

.book-reviews h3 {
  margin-bottom: 20px;
  color: #333;
}

.review-item {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

.review-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
}

.reviewer {
  font-weight: bold;
  color: #333;
}

.review-date {
  color: #999;
  font-size: 14px;
}

.review-content {
  color: #666;
  line-height: 1.6;
}
</style>
